<template>
	<view>
		<status-bar ref='statusbar' title='课程详情' back='1'></status-bar>
		<detailsTop :pageData="pageData"></detailsTop>

		<view class="content">
			<block v-if="!all">
			<view class="nav" :class="{'navfiexd':navfiexd}" >
				<u-tabs :list="list1" @click="click" :scrollable="false" :inactiveStyle="inactiveStyle"
					:activeStyle="activeStyle" :lineWidth="40" :lineColor="color" :current="current">
				</u-tabs>
			</view>
			<view class="tire" v-if="navfiexd"></view>
			</block>
			<view class="rows p-top40">
				<contentTxt v-if="current == 0" :pageData="pageData"></contentTxt>
				<chapter v-if="current == 1" :pageData="pageData"></chapter>	
				<ranking v-if="current == 2" :pageData="rankList" :rank="rank" :all="all"></ranking>	
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import detailsTop from './components/courseDetails/detailsTop.vue'
	import contentTxt from './components/courseDetails/content.vue'
	import chapter from './components/courseDetails/chapter.vue'
	import ranking from './components/courseDetails/ranking.vue'
	export default {
		components: {
			detailsTop,
			contentTxt,
			chapter,
			ranking
		},
		data() {
			return {
				getMore:true,
				list1: [{
					name: '详情'
				}, {
					name: '章节'
				}, {
					name: '排名'
				}],
				itemStyle: {
					height: '70rpx'
				},
				current: 1,
				all:false, // 全部排名
				navTop: 0,
				navfiexd: false,
				goods_id:'',
				pageData:'',
				page:1,
				limit:10,
				rank:'',
				rankList:[],
			}
		},
		onLoad(opt) {
			
			if(opt.goods_id) this.goods_id = opt.goods_id;
			if(opt.all && !opt.all){
				this.current = 2;
				this.all = opt.all;
			} 
		},
		onShow() {
			this.singleDetails();
			if(this.all) this.studyRank()
			setTimeout(() => {
				this.getViewInfo('#nav').then(data => {
					if (!data) return;
					this.navTop = data.top;
				})
			}, 1000)
			
		},
		methods: {
			singleDetails(){
				this.$http.post({
					url:'/singleSaleApi/singleDetails',
					data:{
						goods_id:this.goods_id,
					}
				}).then(res=>{
					if(res.errcode != 100) return this.$Toast(res.msg);
					this.pageData = res.data;
				})
			},
			click(e) {
				this.current = e.index;
				if(e.index == 2) return this.studyRank();
				
			},
			studyRank(){
				this.$http.get({
					url:'/DisciplineApi/studyRank',
					data:{
						page:this.page,
						limit:this.limit,
						goods_id:this.goods_id,
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					const Data = result.rankList || [];
					this.rank = result.rank;
					this.page == 1?this.rankList = Data:this.rankList = this.rankList.concat(Data);
					if(!Data.length) return this.getMore = false;
				})
			},
			getViewInfo(selector) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(selector).boundingClientRect(data => {
						resolve(data)
					}).exec();
				})
			},
		},
		computed: {
			...mapState(['inactiveStyle', 'activeStyle', 'color'])
		},
		onReachBottom() {
			if(this.current != 2 || !this.getMore) return;
			this.page++;
			this.studyRank();
		},
		onPageScroll(e) {
			if (this.navTop == 0) return;
			const scrollTop = e.scrollTop;
			scrollTop > this.navTop ? this.navfiexd = true : this.navfiexd = false
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
	}

	.nav,.tire{
		width: 100%;
		background-color: #ffffff;
		padding: 0 150rpx;
		height: 100rpx;
	}

	// #ifdef MP-WEIXIN
	.navfiexd {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 888;
	}

	// #endif
	// #ifdef H5
	.navfiexd {
		position: fixed;
		top: 40px;
		left: 0;
		z-index: 888;
	}
	// #endif
</style>